<template>

  <div class="_wz_meetingListDetails">
    <Card dis-hover style="margin-bottom: 10px;">

      <table cellpadding="0" cellspacing="0" border="0">
        <colgroup>
          <col width="12%">
          <col width="18%">
          <col width="12%">
          <col width="4%">
          <col width="14%">
        </colgroup>
        <tbody>
        <tr>
          <td style="text-align: center;">会议标题</td>
          <td colspan="4">{{!!formData.meetingTheme?formData.meetingTheme:'--'}}</td>
        </tr>
        <tr>
          <td style="text-align: center;">经营企业</td>
          <td colspan="4">{{!!formData.deptName?formData.deptName:'--'}}</td>
        </tr>
        <tr>
          <td style="text-align: center;">主持人</td>
          <td>{{!!formData.meetingEmcee?formData.meetingEmcee:'--'}}</td>
          <td style="text-align: center;">记录人</td>
          <td colspan="2">{{!!formData.meetingRecorder?formData.meetingRecorder:'--'}}</td>
        </tr>
        <tr>
          <td style="text-align: center;">会议时间</td>
          <td>{{!!formData.meetingStartDate?formData.meetingStartDate:'--'}}</td>
          <td style="text-align: center;">截至日期</td>
          <td colspan="2">{{!!formData.meetingEndDate?formData.meetingEndDate:'--'}}</td>
        </tr>
        <tr>
          <td style="text-align: center;">会议类型</td>
          <td>{{formData.meetingType == 1 ? '安全生产例会' : '领导小组会议'}}</td>
          <td style="text-align: center;">会议地点</td>
          <td colspan="2">{{!!formData.meetingSite?formData.meetingSite:'--'}}</td>
        </tr>
        <tr>
          <td style="text-align: center;">会议附件</td>
          <td colspan="4">

            <template v-if="!!formData.meetingMaterialFirst" style="margin: 0 0 5px 0;">
              <span  @click="checkMaterial(formData.meetingMaterialFirst)" style="color: #2d8cf0;cursor: pointer;margin: 0 10px;">{{formData.meetingMaterialFirstName}}</span>
            </template>

            <template v-if="!!formData.meetingMaterialSecond" style="margin: 0 0 5px 0;">
              <span  @click="checkMaterial(formData.meetingMaterialSecond)" style="color: #2d8cf0;cursor: pointer;margin: 0 10px;">{{formData.meetingMaterialSecondName}}</span>
            </template>

            <template v-if="!!formData.meetingMaterialThirdly" style="margin: 0 0 5px 0;">
              <span  @click="checkMaterial(formData.meetingMaterialThirdly)" style="color: #2d8cf0;cursor: pointer;margin: 0 10px;">{{formData.meetingMaterialThirdlyName}}</span>
            </template>

          </td>
        </tr>
        <tr>
          <td style="text-align: center;">会议内容</td>
          <td colspan="4">
            <span v-html="formData.meetingContent"></span>
          </td>
        </tr>
        <tr>
          <td style="text-align: center;">备注</td>
          <td colspan="4">{{!!formData.remark?formData.remark:'--'}}</td>
        </tr>
        <tr>
          <td style="text-align: center;">远程参会人员</td>
          <td colspan="4">应参人数<span style="color: #2d8cf0;">{{formData.meetingTotalNumber}}</span>/人 , 实参人数<span style="color: #19be6b;">{{formData.meetingRemoteNumber}}</span>/人</td>
        </tr>
        <template v-for="item in formData.remoteList">

          <tr>
            <td style="text-align: center;">
                <Image :src="!!item.remoteDriverAvatar ? apiUrl.imgUrl + item.remoteDriverAvatar : 'img/zwtpxd.png'" fit="contain" width='57px' height='79px' preview :preview-list="[!!item.remoteDriverAvatar ? apiUrl.imgUrl + item.remoteDriverAvatar : 'img/zwtpxd.png']" />
                <div style="font-size: 12px;text-align: center;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;width: 100%;"></div>
            </td>
            <td colspan="3">
              <div style="line-height: 30px;">
                <span style="margin: 0 10px;">{{item.remoteDriverName}} </span>
                <span style="margin: 0 10px;">{{!!item.remoteDriverPhone?item.remoteDriverPhone:'--'}}</span>
                <span style="margin: 0 10px;">{{!!item.remoteDatetime?item.remoteDatetime:'--'}}</span>
              </div>
              <div style="padding:5px 10px;">{{item.remoteAddress}}</div>
            </td>
            <td>
              <div style="display: flex;justify-content: center;align-items: center;">
                <div style="line-height: 30px;">
                  <Image :src="!!item.remoteImg ? apiUrl.imgUrl + item.remoteImg : 'img/zwtpxd.png'" fit="contain" width="45px" height="62px" preview :preview-list="[!!item.remoteImg ? apiUrl.imgUrl + item.remoteImg : 'img/zwtpxd.png']" />
                  <div style="font-size: 12px;text-align: center;">阅读记录</div>
                </div>
                <div style="line-height: 30px;">
                  <Image :src="!!item.remoteSign ? apiUrl.imgUrl + item.remoteSign : 'img/zwtpxd.png'" fit="contain" width="45px" height="62px" preview :preview-list="[!!item.remoteSign ? apiUrl.imgUrl + item.remoteSign : 'img/zwtpxd.png']" />
                  <div style="font-size: 12px;text-align: center;">手签照</div>
                </div>
              </div>
            </td>
          </tr>
        </template>
        </tbody>
      </table>
      <div style="clear: both;"></div>

    </Card>


  </div>
</template>
<script>


import {
  getCurrentInstance,
  inject,
  nextTick,
  reactive,
  toRefs,
  toRef,
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref,
  defineComponent,
  toRaw,
  watch,
  resolveComponent
} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../../../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex

//reformData
export default defineComponent({
  name: 'meetingListDetails',//组件名称
  components: {
  },//组件引用
  props: ['selectData'],//接收来自父组件的数据
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用


    const state = reactive({
      formData: {
        remoteList:[],//参会人员
      },//培训数据


    });


    //加载数据
    const loadData = ()=>{
      $axios.post(apiUrl.safetyMeetingMeetingRecordInfo,{uuid:props.selectData.uuid}).then((res) => {
        if (!!res) {
          state.formData = res.data.data;
        }
      }).catch((err) => {
        console.log("失败", err)
      })


    }

    //查看素材
    const checkMaterial = (data)=>{

      window.open(apiUrl.export + data)
    }


    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")
      loadData()
    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      apiUrl,
      checkMaterial,//查看素材
    }
  }
})


</script>
<style lang="less">

._wz_meetingListDetails {
  table {
    border-top: 1px solid #515a6e;
    border-left: 1px solid #515a6e;
    width: 100%;
    table-layout:fixed;

    td {
      min-width: 0;
      height: 40px;
      box-sizing: border-box;
      text-align: left;
      text-overflow: ellipsis;
      border-right: 1px solid #515a6e;
      border-bottom: 1px solid #515a6e;
      padding-left: 18px;
      padding-right: 18px;
      overflow:hidden;
      word-wrap: break-word;
      word-break: break-all;
      overflow: hidden;
    }
  }
  .ivu-form-item-label {
    color: #9e9e9e;
  }
}
</style>
